<form nz-form auto-focus-form [formGroup]="validateForm" [nzLayout]="'vertical'">
  <div class="top-save-bar">
    <button type="button" eo-ng-button nzType="primary" [nzLoading]="!globalStore.isLocal && isSaving" (click)="saveAPI()" i18n
      >Save</button
    >
  </div>
  <div class="p-base">
    <nz-skeleton [nzLoading]="!model?.apiAttrInfo" [nzActive]="true"> </nz-skeleton>
    <div class="save-container" *ngIf="model?.apiAttrInfo">
      <eo-ng-input-group nzCompact>
        <eo-ng-select class="!w-[15%] !min-w-[100px] !max-w-[200px]" formControlName="requestMethod">
          <eo-ng-option *ngFor="let item of REQUEST_METHOD" [nzLabel]="item.key" [nzValue]="item.value"></eo-ng-option>
        </eo-ng-select>
        <nz-form-item nz-col class="flex-1">
          <!-- <button
            class="absolute invisible h-0"
            nz-popconfirm
            nzPopconfirmPlacement="top"
            nzPopconfirmTitle="There is domain name information in your path, whether to add it to the environment?"
            [nzPopconfirmVisible]="showEnvTips"
          ></button> -->
          <nz-form-control i18n-nzErrorTip nzErrorTip="Please enter API Path">
            <input type="text" class="rounded-r" name="uri" (blur)="blurUri()" eo-ng-input formControlName="uri" />
          </nz-form-control>
        </nz-form-item>
      </eo-ng-input-group>
      <eo-ng-input-group nzCompact>
        <nz-form-item class="w-[30%] !mb-0">
          <nz-form-control nz-col i18n-nzErrorTip required nzErrorTip="Please select an API group">
            <eo-ng-tree-select
              class="group-select"
              nzAllowClear="false"
              [nzExpandedKeys]="expandKeys"
              [nzDropdownMatchSelectWidth]="false"
              [nzNodes]="groups"
              [(ngModel)]="model.groupId"
              (nzOpenChange)="openGroup()"
              [nzShowSearch]="true"
              #apiGroup
              [formControl]="$any(validateForm.get('groupId'))"
            >
            </eo-ng-tree-select>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item class="flex-1 !mb-0">
          <nz-form-control nz-col i18n-nzErrorTip nzErrorTip="Please enter API name" [nzValidateStatus]="this.validateForm.controls.name">
            <input type="text" class="rounded-r" name="name" eo-ng-input formControlName="name" />
          </nz-form-control>
        </nz-form-item>
      </eo-ng-input-group>
      <!-- Request -->
      <nz-collapse class="mt-[20px]">
        <nz-collapse-panel [nzActive]="true" i18n-nzHeader nzHeader="Request">
          <eo-ng-tabset [nzAnimated]="false" [(nzSelectedIndex)]="nzSelectedIndex">
            <!-- Request Headers -->
            <eo-ng-tab [nzTitle]="headerTitleTmp">
              <ng-template #headerTitleTmp>
                <span i18n>Request Headers</span>
                <nz-badge *ngIf="bindGetApiParamNum(model.requestParams.headerParams)" class="ml-1" nzStatus="success"></nz-badge>
              </ng-template>
              <eo-api-edit-form
                module="header"
                tid="requestParams.headerParams"
                (modelChange)="emitChangeFun()"
                [(model)]="model.requestParams.headerParams"
              >
              </eo-api-edit-form>
            </eo-ng-tab>
            <!-- Request Body -->
            <eo-ng-tab [nzTitle]="bodyTitleTmp">
              <ng-template #bodyTitleTmp>
                <span i18n>Body</span>
                <nz-badge class="ml-1" *ngIf="bindGetApiParamNum(model.requestParams.bodyParams)" nzStatus="success"></nz-badge>
              </ng-template>
              <eo-api-edit-body
                #editBody
                tid="requestBody"
                [(bodyType)]="model.apiAttrInfo.contentType"
                [(model)]="model.requestParams.bodyParams"
                (modelChange)="emitChangeFun()"
              >
              </eo-api-edit-body>
            </eo-ng-tab>
            <eo-ng-tab [nzTitle]="queryTitleTmp">
              <ng-template #queryTitleTmp>
                <span i18n>Query</span>
                <nz-badge *ngIf="bindGetApiParamNum(model.requestParams.queryParams)" class="ml-1" nzStatus="success"></nz-badge>
              </ng-template>
              <eo-api-edit-form
                module="query"
                tid="queryParams"
                (modelChange)="emitChangeFun()"
                [(model)]="model.requestParams.queryParams"
              >
              </eo-api-edit-form>
            </eo-ng-tab>
            <eo-ng-tab [nzTitle]="restTitleTmp">
              <ng-template #restTitleTmp>
                <span i18n>REST</span>
                <nz-badge *ngIf="bindGetApiParamNum(model.requestParams.restParams)" class="ml-1" nzStatus="success"></nz-badge>
              </ng-template>
              <eo-api-edit-form module="rest" tid="restParams" [(model)]="model.requestParams.restParams" (modelChange)="emitChangeFun()">
              </eo-api-edit-form>
            </eo-ng-tab>
          </eo-ng-tabset>
        </nz-collapse-panel>
      </nz-collapse>

      <!-- Response -->
      <nz-collapse class="eo_collapse mt-[20px]">
        <nz-collapse-panel [nzActive]="true" i18n-nzHeader nzHeader="Response">
          <eo-ng-tabset [nzAnimated]="false" [nzSelectedIndex]="1">
            <eo-ng-tab [nzTitle]="responseHeaderTitleTmp">
              <ng-template #responseHeaderTitleTmp>
                <span i18n>Response Headers</span>
                <nz-badge
                  *ngIf="bindGetApiParamNum(model.responseList[0].responseParams.headerParams)"
                  class="ml-1"
                  nzStatus="success"
                ></nz-badge>
              </ng-template>
              <eo-api-edit-form
                module="header"
                tid="responseHeaders"
                [(model)]="model.responseList[0].responseParams.headerParams"
                (modelChange)="emitChangeFun()"
              >
              </eo-api-edit-form>
            </eo-ng-tab>
            <eo-ng-tab [nzTitle]="responseTitleTmp">
              <ng-template #responseTitleTmp>
                <span i18n>Response</span>
                <nz-badge
                  class="ml-1"
                  *ngIf="bindGetApiParamNum(model.responseList[0].responseParams.bodyParams)"
                  nzStatus="success"
                ></nz-badge>
              </ng-template>
              <eo-api-edit-body
                tid="responseBody"
                #resEditBody
                [(bodyType)]="model.responseList[0].contentType"
                [(model)]="model.responseList[0].responseParams.bodyParams"
                (modelChange)="emitChangeFun()"
                [supportType]="[TYPE_API_BODY.JSON, TYPE_API_BODY.XML, TYPE_API_BODY.Raw, TYPE_API_BODY.Binary]"
              >
              </eo-api-edit-body>
            </eo-ng-tab>
          </eo-ng-tabset>
        </nz-collapse-panel>
      </nz-collapse>
      <!-- Script Action -->
      <nz-collapse *ngIf="model.scriptList" class="mt-[20px]">
        <nz-collapse-panel class="relative" [nzActive]="true" i18n-nzHeader nzHeader="Script Action">
          <pc-action>
            <div name="pre">
              <eo-api-script
                [(code)]="model.scriptList[0].data"
                (codeChange)="emitChangeFun()"
                [treeData]="BEFORE_DATA"
                [completions]="beforeScriptCompletions"
              ></eo-api-script>
            </div>
            <div name="after">
              <eo-api-script
                [(code)]="model.scriptList[1].data"
                (codeChange)="emitChangeFun()"
                [treeData]="AFTER_DATA"
                [completions]="afterScriptCompletions"
              ></eo-api-script>
            </div>
          </pc-action>
        </nz-collapse-panel>
      </nz-collapse>
    </div>
  </div>
</form>
